<template>
  <div class="listMain">
    <van-search v-model="value" show-action style shape="round" placeholder="请输入商品名称">
      <template #action>
        <div @click="onSearch" style="color:#11b57c;">搜索</div>
      </template>
    </van-search>
    <van-sidebar v-model="activeKey" style="float:left;padding-top=0.3419rem heigth:100%">
      <van-sidebar-item
        :title="item.CategoryName"
        :style="(index==activeKey?'color:#11b57c': 'color:#333')"
        v-for="(item,index) in datalist "
        :key="index"
      />
    </van-sidebar>
    <div class="typebox">
      <div class="type1">
        <a
          class="typelist"
          @click="a(index)"
          v-for="(item,index) in datalist[activeKey].Childs"
          :key="index"
        >
          <img :src="item.PictureUrl" />
          <p>{{item.CategoryName}}</p>
        </a>
      </div>
    </div>
    <app-bottomnav></app-bottomnav>
  </div>
</template>

<script>
// 引入底部导航
import appBottomnav from "@/components/bottomNav";
import datalist from "../../assets/goodtype.json";
export default {
  data() {
    return {
      datalist,
      activeKey: 0,
      value: ""
    };
  },

  components: { appBottomnav },

  methods: {
    onSearch() {
      if(this.value){
        console.log(111);
        this.$router.push("/list/goodlist?"+this.value)
      }else{
        this.$toast("请输入要查询的内容")
      }
    },
    a() {
      this.$router.push("/list/goodlist");
    }
  }
};
</script>

<style scoped>
/* 头部 */
.van-search {
  padding: 0.0645rem 0.0826rem;
  width: 3.04rem;
  height: 0.3419rem;
  border-bottom: 0.001rem solid #f4f4f4;
  position: fixed;
  top: 0;
  z-index: 999;
}
.van-search input {
  width: 2.0641rem;
  height: 0.2193rem;
}
.van-cell--borderless {
  height: 0.2322rem;
  line-height: 0.1709rem;
}
/* 列表 */
.van-sidebar {
  padding-top: 0.3419rem;
}
.van-sidebar-item--select::before {
  width: 0.0256rem;
  height: 100%;
  background-color: #11b57c;
}
.van-sidebar-item {
  padding: 0.1709rem 0;
  color: #11b57c;
  font-size: 0.09rem;
  height: 0.4387rem;
  width: 0.7148rem;
}
/* 右边列表 */
.typebox {
  height: 5.3rem;
  overflow: scroll;
}
.type1 {
  width: 2.35rem;
  position: relative;
  float: left;
  top: -0.1709rem;
  height: 5.656rem;
  padding: 0.26rem 0.1548rem 0rem 0.05rem;
}
.type1 a {
  display: inline-block;
  width: 0.7122rem;
  height: 0.3044rem;
  box-sizing: border-box;
  position: relative;
  padding-top: 0.5161rem;
  text-align: center;
  font-size: 0.1026rem;
  color: #808080;
  margin-top: 0.2308rem;
}
.type1 a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.4877rem;
  height: 0.4877rem;
  margin: 0 0.111rem;
}
</style>
<style >
.listMain {
  background: #fff;
}
</style>